<template>
    <div
        class="header-bar-container"
        :style="{ height: height }"
        :class="{ 'show-padding': showDir }"
    >
        <div v-if="false">
            <i
                class="el-icon-arrow-left dir-class-left"
                :style="{ lineHeight: height }"
                @click="barScroll('left')"
                v-if="showDir"
            ></i>
            <ul class="header-bar" :style="{ height: height, lineHeight: height }" ref="bar">
                <li
                    v-for="item in fileredMenuList"
                    :key="item.id"
                    class="header-bar-item"
                    :class="{ active: activeId === item.id }"
                    @click="handleClick(item)"
                >
                    <i
                        :class="joinClass(item.meta.icon)"
                        style="margin-right: 5px"
                        class="active-icon"
                    ></i>
                    <span>{{ item.meta.title }}</span>
                </li>
            </ul>
            <i
                class="el-icon-arrow-right dir-class-right"
                :style="{ lineHeight: height }"
                @click="barScroll('right')"
                v-if="showDir"
            ></i>
        </div>
        <div class="header-bar-logo" :style="{ height: height, lineHeight: height }">
            <img src="@/assets/img/khindex/small_logo2.png" class="logo" alt />
            <div class="header-bar_cneter">
                <div class="notice_wrap">
                    <div class="notice_img">
                        <img src="@/assets/img/khindex/ggtz.png" alt width="22px" />
                        <span>公告:</span>
                    </div>
                    <Notice v-if="isShowUserInfo" />
                </div>
            </div>
            <div class="header-bar_right">
                <div class="header-bar-left">
                    <HeaderButon />
                    <!--<div class="header-status">-->
                    <!--<span class=" status-lf">振铃中</span>-->
                    <!--<span class="status-ct" >{{ tel }}</span>-->
                    <!--<span class="status-rt">{{ currentTime }}</span>-->
                    <!--</div>-->
                    <div class="header-bar-custom-menu" v-popover:popover style="cursor: pointer">
                        <img
                            v-if="userAssociate.userAvatar"
                            :src="userAssociate.userAvatar"
                            alt
                            width="25px"
                            height="25px"
                        />
                        <img
                            v-else
                            src="@/assets/img/khindex/userDefault.png"
                            alt
                            width="25px"
                            height="25px"
                        />
                        <span style="margin-left: 8px">{{ userName }}</span>
                        <el-popover ref="popover" placement="bottom-start" trigger="click">
                            <div class="changeUserInfo" @click="updatePass()">修改密码</div>
                            <div class="changeUserInfo" @click="updataDialogFun">个人中心</div>
                            <div class="changeUserInfo" @click="logOut()">退出</div>
                        </el-popover>
                    </div>
                </div>
            </div>
        </div>
        <!-- 修改密码弹框 -->
        <el-dialog
            v-drag
            :visible.sync="changePassFlag"
            class="changeClass"
            append-to-body
            center
            width="500px"
            :show-close="changePassDialog"
            :close-on-click-modal="changePassDialog"
        >
            <div slot="title">修改密码</div>
            <el-form
                :model="Edit"
                class="menu-setting"
                label-position="right"
                ref="Edit"
                label-width="110px"
                :rules="formRules"
                size="small"
            >
                <el-form-item label="旧密码" prop="oldPass">
                    <el-input
                        type="password"
                        v-model="Edit.oldPass"
                        placeholder="请输入"
                        style="width: 200px"
                    />
                </el-form-item>
                <el-form-item label="新密码" prop="userPass">
                    <el-input
                        :type="pwdType"
                        v-model="Edit.userPass"
                        placeholder="请输入"
                        style="width: 200px"
                    >
                        <i slot="suffix" class="el-icon-view" @click="showPwd"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="repeatUserPass">
                    <el-input
                        :type="pwdCheckType"
                        v-model="Edit.repeatUserPass"
                        placeholder="请输入"
                        style="width: 200px"
                    >
                        <i slot="suffix" class="el-icon-view" @click="showCheckPwd"></i>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    @click="changePassFlag = false"
                    v-if="changePassDialog"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitEdit"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            class="noticeBody"
            :visible.sync="IPMDialog"
            append-to-body
            center
            width="930px"
            height="900px"
        >
            <div slot="title">个人中心</div>
            <div>
                <IPMInformation :closeDialog="closeDialog" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { HEAD_MENU_WIDTH, HEAD_MENU_HEIGHT } from 'utils/Contants';
import { MobileNum, base64Encode, getDictSelectList } from 'utils/Common';
import { now } from 'utils/Date';
import { isEmptyObject } from '@/utils/Object';
import HeaderButon from './HeaderButon';
import Notice from '@/components/notice/Notice';
import IPMInformation from '@/components/header_bar/IPMInformation';
import { getToken, removeToken, getTokenHsbankNo } from '@/utils/auth';

export default {
    name: 'HeaderBar',
    components: {
        HeaderButon,
        Notice,
        IPMInformation,
    },
    props: {
        // 高度
        height: {
            type: String,
            default: `${HEAD_MENU_HEIGHT}px`,
        },
        marginLeft: {
            type: String,
            default: `${HEAD_MENU_WIDTH}px`,
        },
        // 默认激活项的id
        defaultActive: {
            type: String,
            default: '',
        },
        // 采用字体图标时的公共class名
        iconClass: {
            type: String,
            default: '',
        },
        moveWidth: {
            type: Number,
            default: 60,
        },
    },

    data() {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'));
            } else {
                if (this.Edit.repeatUserPass !== '') {
                    this.$refs.Edit.validateField('repeatUserPass');
                }
                callback();
            }
        };
        const validateRepeatPass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.Edit.userPass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            IPMDialog: false,
            value: '',
            pwdType: 'password',
            pwdCheckType: 'password',
            tableData: {},
            paramsObj: {},
            ipByctiObj: {},
            innerHTML: '',
            // 当前激活想id
            activeId: this.defaultActive,
            // 是否显示左右方向箭头按钮
            showDir: false,
            tel: MobileNum('12345678912'),
            newDate: now('HH:mm:ss'),
            userName: '',
            changePassFlag: false,
            changePassDialog: false,
            updatePwdFlag: 0,
            passExpireFlag: '', ////
            Edit: {
                oldPass: '',
                userPass: '',
                repeatUserPass: '',
            },
            formRules: {
                oldPass: [
                    { required: true, message: '请输入旧密码', trigger: 'blur' },
                ],
                userPass: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,16}$/, message: '密码为数字,大小写字母,特殊符号,至少包含三种,长度为6-16', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' },
                ],
                repeatUserPass: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    { validator: validateRepeatPass, trigger: 'blur' },
                ],
            },
            filePathArr: [
                '/h5client/jquery.min.js',
                '/h5client/h5client.js',
                '/h5client/promise.js',
                '/h5client/h5client.cfg.js',
                '/h5client/jNotify.jquery.js',
                '/h5client/dateutil.js',
                '/action-1.0.0.js',
                '/listener-1.0.0.js',
                '/softphone-1.0.0.js',
            ],
            SOFTPHONE_outboundGroup: [],
            SOFTPHONE_outboundReasonCode: [],
            SOFTPHONE_dropCallReason: [],
            SOFTPHONE_notReadyReasons: [],
            SOFTPHONE_notReadyReasonNames: [],
            SOFTPHONE_hiddByteReasons: [],
            SOFTPHONE_hiddByteReasonNames: [],
            SOFTPHONE_toIVRType: [],
            loading: false,
        };
    },

    created() {
        this.userName = getToken() ? JSON.parse(getToken()).userAccount : '';
        this.updatePwdFlag = getToken() ? JSON.parse(getToken()).updatePwdFlag : '';
        this.passExpireFlag = getToken() ? JSON.parse(getToken()).passExpireFlag : '';
        console.log('检查 是否取到了 数据在修改密码的时候——————————', this.userName, this.updatePwdFlag, this.passExpireFlag);
        if (this.updatePwdFlag === '0' || this.updatePwdFlag === '' || this.passExpireFlag === '1') {
            this.changePassFlag = true;
            this.changePassDialog = false;
        }
    },
    mounted() {
        // 判断是否要显示方向箭头
        // this.showDir = this.$refs.bar.scrollWidth > this.$refs.bar.offsetWidth;
        this.promiseDta();
    },
    // 添加 监听器 监听 changePassFlag 是否为false  updatePwdFlag 是否 为 0 
    computed: {
        currentTime() {
            return this.newDate = now('HH:mm:ss');
        },
        ...mapGetters([
            'teamInfo',
            'userAssociate',
            'userInfo',
        ]),
        isShowUserInfo() {
            if (isEmptyObject(this.userInfo)) {
                return false
            } else { return true }
        }
    },

    methods: {
        // 显示个人中心模块
        updataDialogFun() {
            this.IPMDialog = true;
        },
        showPwd() {
            this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
            const e = document.getElementsByClassName('el-icon-view')[0];
            this.pwdType === 'text' ? e.setAttribute('style', 'color: #409EFF') : e.setAttribute('style', 'color: #c0c4cc');
        },
        showCheckPwd() {
            this.pwdCheckType = this.pwdCheckType === 'password' ? 'text' : 'password';
            const e = document.getElementsByClassName('el-icon-view')[1];
            this.pwdCheckType === 'text' ? e.setAttribute('style', 'color: #409EFF') : e.setAttribute('style', 'color: #c0c4cc');
        },
        async promiseDta() {
            await this.getParams();
            await this.getIpByCti();
            this.SOFTPHONE_outboundGroup = await getDictSelectList('SOFTPHONE_outboundGroup', this);
            this.SOFTPHONE_outboundReasonCode = await getDictSelectList('SOFTPHONE_outboundReasonCode', this);
            this.SOFTPHONE_dropCallReason = await getDictSelectList('SOFTPHONE_dropCallReason', this);
            this.SOFTPHONE_notReadyReasons = await getDictSelectList('SOFTPHONE_notReadyReasons', this);
            this.SOFTPHONE_notReadyReasonNames = await getDictSelectList('SOFTPHONE_notReadyReasonNames', this);
            this.SOFTPHONE_hiddByteReasons = await getDictSelectList('SOFTPHONE_hiddByteReasons', this);
            this.SOFTPHONE_hiddByteReasonNames = await getDictSelectList('SOFTPHONE_hiddByteReasonNames', this);
            this.SOFTPHONE_toIVRType = await getDictSelectList('SOFTPHONE_toIVRType', this);
            this.softPhoneMeth();
        },

        async softPhoneMeth() {
            if (JSON.parse(getToken()).userAccount === '4590') {
                this.tableData = {
                    // softPhonePath: 'http://10.188.44.51:8994/h5SoftPhone',
                    softPhonePath: 'http://127.0.0.1:8082/iccsrv',
                    ivrServerPath: 'http://10.152.143.43:7080/WIEInfo',
                    ctiConnectors: '10.152.143.45:8123,10.152.143.46:8123',
                    dealConnectors: '10.152.143.45:8125;10.152.143.46:8125',
                    httpConnector: '10.152.143.46:9590',
                    monitorConnector: '10.152.143.46:9590',
                    ivrVdnNo: '',
                };
            } else {
                this.tableData = Object.assign({}, this.paramsObj, this.ipByctiObj);
            }
            const myPromise = new Promise((resolve, reject) => {
                // this.loadFunc(0, resolve);
                resolve();
            });
            myPromise.then(() => {
                const userInfo = JSON.parse(getToken());
                // 软电话应用URL
                // const { softPhonePath } = this.tableData; // "http://10.152.5.137:8080/h5SoftPhone"
                // const softPhonePath = 'http://38.62.164.33:8080';
                const ivr_path = this.paramsObj['ivr_path'];
                // IVR转接URL
                const { ivrServerPath } = this.tableData; // "http://10.152.143.43:7080/WIEInfo";
                // 坐席登录编号
                const loginId = userInfo.userAccount; // 8888666 userInfo.userAccount
                // 坐席姓名
                const agentName = userInfo.userName; // 郑林清 userInfo.userName
                // 坐席CTI工号
                const agentId = userInfo.ctiNum; // 5800203 userInfo.ctiNum
                // 坐席CTI工号登录密码
                const { ctiPass } = userInfo; // '000000';
                // 坐席CTI工号签入分机号
                const extNo = userInfo.extensionNum; // "5600203"  userInfo.extensionNum
                // 坐席对应操作员工号-交易上送使用
                const opeNo = userInfo.agNum; // "123456"; userInfo.agNum
                // 坐席所属租户
                const tenantId = getTokenHsbankNo('HsbankNo');
                // 坐席所属租户职场
                const workPlace = userInfo.workplaceId;
                // 坐席所拥有的技能组
                // const agentgroupList = [];
                // if (window.skillList.length) {
                //     window.skillList.forEach((item) => {
                //         agentgroupList.push({ groupNo: item.label.split('#')[0], groupVDN: item.label.split('#')[1], groupAutoAnswer: eval(item.label.split('#')[2].toLocaleLowerCase()) });
                //     });
                // }
                // 默认外呼技能组
                // const outboundGroup = this.SOFTPHONE_outboundGroup[0].code;
                const agentGroup = this.teamInfo.teamName;
                const outboundGroup = '';
                // CTI连接地址
                // const ctiConnectors = this.tableData.ctiConnectors.length ? this.tableData.ctiConnectors.split(',') : []; // ["10.152.143.45:8123","10.152.143.46:8123"] 需要处理;
                const ctiConnectors = this.tableData.ctiConnectors;
                window.ctiConnectors = ctiConnectors;
                // 坐席状态修改地址
                const { dealConnectors } = this.tableData; // "10.152.143.45:8125;10.152.143.46:8125";
                // 坐席监控数据查询地址
                const { httpConnector } = this.tableData; // "10.152.143.46:9590";
                // 坐席监控地址
                const { monitorConnector } = this.tableData; // "10.152.143.46:9599";
                // 外呼示忙原因码
                // const outboundReasonCode = this.SOFTPHONE_outboundReasonCode[0].code;
                const outboundReasonCode = '';
                // 挂机示忙原因码
                // const dropCallReason = this.SOFTPHONE_dropCallReason[0].code;
                const dropCallReason = '';
                // 示忙原因码-展示在下拉框
                const notReadyReasonsArr = [];
                this.SOFTPHONE_notReadyReasons.forEach((item) => {
                    notReadyReasonsArr.push(item.code);
                });
                const notReadyReasons = notReadyReasonsArr;
                // 示忙原因名称-展示在下拉框
                const notReadyReasonNamesArr = [];
                this.SOFTPHONE_notReadyReasonNames.forEach((item) => {
                    notReadyReasonNamesArr.push(item.code);
                });
                const notReadyReasonNames = notReadyReasonNamesArr;
                // 辅助示忙原因码-不展示在下拉框
                const hiddByteReasonsArr = [];
                this.SOFTPHONE_hiddByteReasons.forEach((item) => {
                    hiddByteReasonsArr.push(item.code);
                });
                const hiddByteReasons = hiddByteReasonsArr;
                // 辅助示忙原因名称-不展示在下拉框
                const hiddByteReasonNamesArr = [];
                this.SOFTPHONE_hiddByteReasonNames.forEach((item) => {
                    hiddByteReasonNamesArr.push(item.code);
                });
                const hiddByteReasonNames = hiddByteReasonNamesArr;
                // 转接IVR模式  1-会议转接，0-单步转接
                // const toIVRType = this.SOFTPHONE_toIVRType[0].code;
                const toIVRType = '';
                //是否自动应答
                const aothAnwserFlag = this.paramsObj['aoth_anwser_flag'];
                // 转接IVR流程VDN
                const ivrVdnNo = this.paramsObj['ivr_vdn_no']; // "88888";
                const aicPath = this.paramsObj['aic_path'];
                const aicPort = this.paramsObj['aic_port'];
                const zhIvrVdnNo = this.paramsObj['zh_ivr_vdn_no'];
                const queueNo = this.paramsObj['queue_no'];
                const softphone = new SoftPhone();
                softphone.initObj(loginId, agentName, agentId, ctiPass, extNo, opeNo, tenantId, workPlace, agentGroup, outboundGroup, ivr_path, ivrServerPath, ctiConnectors, dealConnectors, httpConnector, monitorConnector, outboundReasonCode, dropCallReason, notReadyReasons, notReadyReasonNames, hiddByteReasons, hiddByteReasonNames, ivrVdnNo, toIVRType, aothAnwserFlag, aicPath, aicPort, zhIvrVdnNo, queueNo);
                // softphone.initObj();
                top.softphone = softphone;
                // top.DateUtil = DateUtil;
            });
        },

        // 实现动态创建script标签 同步加载js文件
        loadFunc(index, resolve) {
            let css = null;
            css = document.createElement('link');
            css.rel = 'stylesheet';
            css.href = `${this.tableData.softPhonePath}/h5client/jNotify.jquery.css`;
            document.head.appendChild(css);
            if (this.filePathArr[index]) {
                const js = document.createElement('script');
                js.src = this.tableData.softPhonePath + this.filePathArr[index];
                document.head.appendChild(js);
                if (document.all) { // IE浏览器
                    js.onreadystatechange = () => {
                        if (js.readyState === 'loaded' || js.readyState === 'complete') {
                            this.loadFunc(index + 1, resolve);
                        }
                    };
                } else {
                    js.onload = () => {
                        this.loadFunc(index + 1, resolve);
                    };
                }
            } else {
                resolve();
            }
        },

        // 获取软电话对应的参数
        async getParams() {
            await this.$post.Params.searchListByParam({ paramType: '软电话参数' }).then((res) => {
                if (res.data.success) {
                    const arr = JSON.parse(JSON.stringify(res.data.content));
                    arr.forEach((item) => {
                        this.paramsObj[item.paramCode] = item.paramValue;
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        // 获取IP地址对应的分机号
        async getIpByCti() {
            await this.$post.IpAllocation.findAllIpExtNo().then((res) => {
                if (res.data.success) {
                    const arr = JSON.parse(JSON.stringify(res.data.content));
                    arr.forEach((item) => {
                        this.ipByctiObj[item.ipAddr] = item.extNo;
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        // 菜单项的点击事件
        handleClick(data) {
            this.activeId = data.id;
            // 将激活菜单的数据传出去
            this.$emit('item-click', data.children);
            // 更新外部的激活的菜单项id
            this.$emit('update:defaultActive', this.activeId);
        },

        // 修改密码
        submitEdit() {
            const params = {
                id: getToken() ? JSON.parse(getToken()).id : '',
                userPass: base64Encode(this.Edit.userPass),
                oldPass: base64Encode(this.Edit.oldPass),
            };
            this.$refs.Edit.validate((valid) => {
                if (valid) {
                    // 换成修改密码接口
                    this.$post.user.updatePwd(params).then((res) => {
                        if (res.data.success) {
                            this.$message.success('修改成功!');
                            this.changePassFlag = false;
                            // 第一次账户进行 进行修改密码操作 强制退出用新密码登录 
                            if (this.updatePwdFlag === '0' || this.updatePwdFlag === '' || this.passExpireFlag === '1') {
                                removeToken()
                                this.$router.push('/login')
                            }
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                }
            });
        },

        // 修改密码
        updatePass() {
            this.Edit = {
                oldPass: '',
                userPass: '',
                repeatUserPass: '',
            };
            this.changePassFlag = true;
            this.changePassDialog = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    this.$refs.Edit.resetFields();
                });
            }
        },

        // 退出
        logOut() {
            if (!this.loading) {
                this.loading = true;
                if (top.softphone) {
                    if ($('#loginOrLogoutBtn').text() === '签出') {
                        top.softphone.disconnectBtnClick();
                    }
                }
                this.$post.user.logout().then((res) => {
                    if (res.data.success) {
                        this.$store.dispatch('common/delStateAll');
                        this.$store.commit('tagsView/DEL_ALL_VISITED_VIEWS_ITEM');
                        this.$store.commit('tagsView/DEL_ALL_CACHED_VIEWS_ITEM');
                        this.$store.commit('menu/DELECT_ALL_STATE_INITIAL');
                        this.$store.commit('menu/UPDATE_ACTIVE_MENU', true);
                        this.$store.commit('tagsView/DELETE_CACHE_VIEWS', 'businessSystem');
                        this.$store.dispatch('user/delStateUserinforAll');
                        this.$message.success('退出成功!');
                        this.loading = false;
                        sessionStorage.clear();
                        localStorage.clear();
                        removeToken();
                        this.$router.push({
                            path: '/login'
                            // 跳转到登陆页面

                        });
                        // location.reload();
                        this.$router.go(0);
                    } else {
                        this.$message.error(res.data.msg);
                        this.loading = false;
                    }
                });
            }
        },
        closeDialog() {
            this.IPMDialog = false;
        },
        // // 个人中间 跳转路径
        // handleClickIPMInfo() {
        //     this.$router.push({
        //         name: 'IPMInformation',
        //         path: '/information/IPMInformation',

        //     })
        // },
        // 去掉字符串首尾空白
        myTrim(x) {
            return x.replace(/^\s+|\s+$/gm, '');
        },

        // 将字体图标的类拼接在一起
        joinClass(icon) {
            return this.myTrim(`${this.iconClass} ${icon}`);
        },

        // 方向箭头的响应事件
        barScroll(dir) {
            if (dir === 'left') {
                // 滚动到最大值就不再滚动
                this.$refs.bar.scrollLeft += this.moveWidth;
            } else {
                // 滚动到0之后不会再变化
                this.$refs.bar.scrollLeft -= this.moveWidth;
            }
        },
    },
};
</script>
<style lang="scss" scoped>
/* 公告样式 */
.notice_wrap {
    position: relative;
    width: 385px;
    min-width: 300px;
    height: 36px;
    margin-left: 40px;
    padding-left: 50px;
    display: inline-block;
    background-color: #fff;
    .notice_img {
        position: absolute;
        left: -10px;
        line-height: 40px;
        img {
            position: absolute;
            top: 8px;
        }
        span {
            margin-left: 22px;
        }
    }
}
.header-bar-custom-menu {
    img {
        border-radius: 15px;
    }
}
</style>
<style lang="scss">
.changeClass {
    .el-input__suffix {
        top: 8px;
    }
}

.show-padding {
    padding: 0 20px;
}
/* 这是对外 暴露样式 开始 再body层*/
.changeUserInfo {
    text-align: center;
    padding: 6px 0;
    cursor: pointer;
}
.changeUserInfo:hover {
    background-color: #a0cfff;
}
/* 样式结束 */
.header-bar-container {
    position: relative;
    // box-shadow: 0 2px 10px 0 rgba(205,222,255,1);
    z-index: 2;
    background-color: #fff;
    border-bottom: 1px solid #a7c7e6;
    .dir-class-left,
    .dir-class-right {
        height: 100%;
        position: absolute;
        cursor: pointer;
        font-size: 18px;
        font-weight: 600;
    }

    .header-bar-custom-menu {
        padding-left: 5px;
        line-height: 34px;
    }
    .header-bar-custom-menu:hover {
        background-color: #a0cfff;
        border-radius: 10px;
        padding-left: 5px;
    }
    .dir-class-left {
        left: 0;
        top: 0;
    }
    .dir-class-right {
        right: 0;
        top: 0;
    }
    .header-bar {
        /*border: 1px red solid;*/
        overflow: hidden;
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        box-sizing: border-box;
        .header-bar-item {
            height: 100%;
            padding: 0 5px;
            margin: 0 10px;
            box-sizing: border-box;
            border-bottom: 2px solid transparent;
            color: rgba(40, 63, 116, 0.8);
            cursor: pointer;
            white-space: nowrap;
            &:hover:not(.active) {
                color: rgba(40, 63, 116, 1);
            }
            transition: border-bottom-color 500ms ease;
            font-weight: 400;
            /*&:first-child {*/
            /*margin-left: 0;*/
            /*}*/
        }
        .active {
            border-bottom-color: #283f74;
            font-weight: 600;
            color: rgba(40, 63, 116, 1);
            .active-icon {
                font-weight: 600;
            }
        }
    }
    .header-bar-logo {
        padding: 0 18px;
        text-align: left;
        // min-width:1500px;
        .logo {
            height: 40px;
            float: left;
        }
        .header-bar-custom-menu {
            min-width: 128px;
            margin-top: 2px;
            border: 1px solid #ccc;
            border-radius: 5px;
            img {
                height: 24px;
                vertical-align: middle;
                margin-top: 2px;
            }
            span {
                margin-left: 6px;
                color: #283f74;
                font-size: 14px;
            }
            em {
                display: inline-block;
                border: 6px solid #fff;
                border-top-color: #283f74;
                margin-top: 6px;
                vertical-align: middle;
            }
        }
    }
    /* 公告样式 */

    /* 公告样式结束 */

    /*  */
    .header-bar_cneter,
    .header-bar_right {
        display: inline-block;
        height: 42px;
    }
    .header-bar_right {
        position: absolute;
        width: calc(100% - 710px);
    }
    .header-bar-left {
        /* width: calc(100% - 800px); */
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        #notReadyspan {
            top: 0px;

            span {
                float: none;
                margin-right: 0;
            }
        }
        .header-status {
            float: left;
            margin: auto;
            min-width: 275px;
            span {
                height: 32px;
                line-height: 32px;
                display: inline-block;
                padding-left: 8px;
            }
            .status-lf {
                border-top-left-radius: 8px;
                border-bottom-left-radius: 8px;
                padding-right: 10px;
                border-right: 2px solid #2ed0e8;
            }
            .status-ct {
                padding-right: 8px;
            }
            .status-rt {
                border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
                border-left: 2px solid #2ed0e8;
                padding-right: 8px;
            }
        }
    }
}
@-moz-document url-prefix() {
    .header-bar-left #notReadyspan {
        top: 9px;
    }
}
</style>
